<template>
  <div class="container">
    <el-card class="card">
      <div class="topNav">
        <el-button
          @click="$router.push('/questions/new')"
          type="success"
          size="mini"
          class="addBaseTest"
        >
          <i class=""></i>
          <span>新增试题</span>
        </el-button>
      </div>
      <div class="checkNav">
        <el-form ref="testForm" :model="testForm" label-width="80px">
          <div class="fistNav">
            <el-form-item label="学科" prop="subjectID">

              <el-select v-model="testForm.subjectID" placeholder="请选择学科" @change="subjecdChange">
              <el-option label='请选择' :value=null></el-option>
                <el-option
                  v-for="item in subList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级目录" prop="catalogID">
              <el-select
                v-model="testForm.catalogID"
                placeholder="请选择二级目录"
              >
              <el-option label='请选择' :value=null></el-option>

                <el-option
                  v-for="item in dirList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签" prop="tags">
              <el-select v-model="testForm.tags" placeholder="请选择标签">
              <el-option label='请选择' :value=null></el-option>

                <el-option
                  v-for="item in tagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="testForm.keyword"></el-input>
            </el-form-item>
          </div>
          <div class="secendNav">
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                v-model="testForm.questionType"
                placeholder="请选择试题类型"
              >
              <el-option label='请选择' :value=null></el-option>

                <el-option label="单选题" value="1"></el-option>
                <el-option label="多选题" value="2"></el-option>
                <el-option label="简答题" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="testForm.difficulty" placeholder="请选择难度">
              <el-option label='请选择' :value=null></el-option>

                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向" prop="direction">
              <el-select v-model="testForm.direction" placeholder="请选择方向">
              <el-option label='请选择' :value=null></el-option>

                <el-option v-for="item in direction"  :key="item"  :label="item" :value="item"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                v-model="testForm.creatorID"
                placeholder="请选择录入人"
              >
              <el-option label='请选择' :value=null></el-option>
                <el-option value="2" label="超级管理员"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="tiredNav">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="testForm.remarks"></el-input>
            </el-form-item>
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="testForm.shortName"></el-input>
            </el-form-item>

            <div class="cityCheck">
              <el-form-item label="城市" prop="province" class="city">
                <el-select v-model="testForm.province" placeholder="请选择" @change="changeCity" class="harf">
                  <el-option label='请选择' :value=null></el-option>
                  <el-option
                    v-for="item in city1"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select v-model="testForm.city" placeholder="请选择" class="harf harf2">
                                <el-option label='请选择' :value=null></el-option>
                  <el-option
                    v-for="item in city2"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item prop="city" class="city" :label=null>

              </el-form-item> -->
            </div>
            <div class="button2">
              <el-button size="mini" type="primary" @click="checkReset">清空</el-button>
              <el-button size="mini" type="primary" @click="checkFromList">查找</el-button>
            </div>
          </div>
        </el-form>
      </div>
       <el-alert
    :title="`数据一共${counts}条`"
    type="info"
    show-icon>
  </el-alert>
      <el-table :data="questionList"  style="width: 100%">
        <el-table-column fixed prop="number" label="试题编号" width="150">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
        </el-table-column>
        <el-table-column prop="question" label="题干" width="300">
          <template #default={row}>
            <div v-html="row.question">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default={row}>
              {{row.addDate | formatTime2('YYYY-MM-DD HH:MM:ss')}}
            </template>
           </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="70"> </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100"> </el-table-column>
        <el-table-column fixed="right" label="操作" >
          <template slot-scope="scope">
            <el-button plain type="info" icon="el-icon-search" circle  @click="handleClick(scope.row)" size="small"></el-button>
            <el-button plain type="primary" icon="el-icon-edit" circle size="small" @click="$router.push('/questions/new?scope.row.id')"></el-button>
            <el-button plain type="danger" icon="el-icon-delete" circle size="small" @click="delThis(scope.row)"></el-button>
            <el-button plain type="success" icon="el-icon-check" circle size="small" @click="addTojx(scope.row)"></el-button>

          </template>
        </el-table-column>
      </el-table>
      <QuestionComponent :dialog-visible.sync='isShow' :row-data="rowData" @dialog-click='closeIsShow'>
      </QuestionComponent>
      <!-- 分页器 -->
       <div class="block pageCheck">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="testForm.page"
      :page-sizes="[4, 5, 6]"
      :page-size="testForm.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts">
    </el-pagination>
  </div>
    </el-card>
  </div>
</template>

<script>
import QuestionComponent from '../components/questions-preview.vue'
// list是获取题目列表
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
// subList是学科列表
import { simple as subListGet } from '@/api/hmmm/subjects'
// 目录列表
import { simple as dirListGet } from '@/api/hmmm/directorys'
// 标签列表
import { simple as tagListGet } from '@/api/hmmm/tags'
// 城市
import { provinces, citys } from '@/api/hmmm/citys'
// 方向
import { direction, difficulty, questionType } from '@/api/hmmm/constants'
function trans (value, arr) {
  const as = arr.filter(item => item.value.toString() === value)[0].label
  console.log(as, 222)
  return as
}

export default {
  components: {
    QuestionComponent
  },
  data () {
    return {
      // 控制dialog显示
      isShow: false,
      // 储存本行信息
      rowData: {},

      // 保存学科ID
      subjectIDset: null,
      // 引入对比参照
      direction,
      difficulty,
      questionType,
      // 城市
      city1: [],
      city2: [],
      // 学科
      subList: [],
      dirList: [],
      tagList: [],
      questionList: [],
      counts: 1,
      // 添加表单
      testForm: {
        // 当前页数
        page: 1,
        pagesize: 5,
        // 学科
        subjectID: null,
        // 目录
        catalogID: null,
        // 标签
        tags: null,
        // 关键字
        keyword: null,
        // 试题类型
        questionType: null,
        // 难度
        difficulty: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 城市
        province: null,
        city: null
      }
    }
  },
  // computed: {
  //   checkCity: function () {
  //     return citys(this.testForm.provinces)
  //   }
  // },
  watch: {
    testForm: {
      handler (newVal, oldVal) {
        this.city2 = citys(newVal.province)
        // console.log(this.city2)
      },
      deep: true
    }
  },
  created () {
    // 获取基础题库
    this.getBaseQuestionsList()
    // 获取城市
    const province = provinces()
    this.city1 = province
    this.getSubjectList()
  },
  methods: {
    // 当学科改变时触发
    async subjecdChange (subjectID) {
      this.testForm.catalogID = null
      this.testForm.tags = null
      if (subjectID) {
        this.subjectIDset = this.testForm.subjectID
        const obj = { subjectID: this.subjectIDset, pagesize: 999 }
        const { data: items } = await dirListGet(obj)
        console.log('拿到目录', items)
        this.dirList = items

        const {
          data: items2
        } = await tagListGet(obj)
        console.log('拿到标签', items2)
        this.tagList = items2
      } else {
        this.dirList = []
        this.tagList = []
      }
    },

    // 获取题库列表
    async getBaseQuestionsList () {
      console.log(this.testForm, 11111111111)
      const res = await list(this.testForm)
      console.log(res, '这是获取题库')
      res.data.items.forEach(item => {
        item.difficulty = trans(item.difficulty, this.difficulty)
      })
      res.data.items.forEach(item => {
        item.questionType = trans(item.questionType, this.questionType)
      })

      this.counts = res.data.counts
      this.questionList = res.data.items
    },
    // 分页器
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.testForm.pagesize = val
      this.testForm.page = 1
      this.getBaseQuestionsList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.testForm.page = val
      this.getBaseQuestionsList()
    },
    // 删除
    delThis (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        const res = await remove(row)
        console.log(res)
        this.getBaseQuestionsList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取学科列表
    async getSubjectList () {
      const { data } = await subListGet()
      this.subList = data
    },

    handleClick (row) {
      this.isShow = true
      this.rowData = row
    },

    // 加入精选
    async  addTojx (row) {
      const obj = { ...row, choiceState: 1 }
      const res = await choiceAdd(obj)
      console.log(res)
      this.$message({
        type: 'success',
        message: '加入精选成功!'
      })
    },
    closeIsShow () {
      this.isShow = false
    },
    checkFromList () {
      this.getBaseQuestionsList()
    },
    checkReset () {
      this.testForm = {
        // 当前页数
        page: 1,
        pagesize: 5,
        // 学科
        subjectID: null,
        // 目录
        catalogID: null,
        // 标签
        tags: null,
        // 关键字
        keyword: null,
        // 试题类型
        questionType: null,
        // 难度
        difficulty: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 城市
        province: null,
        city: null
      }
      this.getBaseQuestionsList()
    },
    // 当更改城市清空地区
    changeCity () {
      this.testForm.city = null
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .card {
    .topNav {
      display: flex;
      justify-content: end;
      margin: 10px;
    }

    // .addBaseTest {
    //   float: right;
    //   margin: 10px;
    // }
    .tiredNav {
      .cityCheck {
        width: 25%;
        display: flex;
        justify-content: space-between;
        .el-form-item.city {
          width: 100% !important;
          .harf{
            width: 48%;

          }
          .harf.harf2{
            margin-left: 4%;
          }
        }

        ::v-deep.city {
          margin: 0;
          padding: 0;
        }
      }
      .button2 {
        width: 25%;
        height: 32px;
        display: flex;
        justify-content: end;
      }
    }
    .fistNav,
    .secendNav,
    .tiredNav {
      display: flex;
      justify-content: space-between;
      .el-form-item {
        width: 25%;
        .el-select {
          width: 100%;
        }
      }
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .block.pageCheck{
      display: flex;
      justify-content:end;
    }
  }
}
</style>
